<template>
    <div class="news">
        <div class="header flexbetween">
            <div class="flexleft" style="flex:1">
                <div class="shutup pointer" @click="shutup">
                    <!-- 关闭 -->
                    <i class="el-icon-close" style="color: #fff;font-size: 24px;"></i>
                </div>
                <div class="margin-left1 margin-right3">
                    <img src="@/assets/img/layout/logo.png" alt="" class="logoimg">
                </div>
                <div class="title">消息中心</div>
            </div>
        </div>
        <div class="content flexbetween">
            <div class="l">
                <div class="nav-title padding15 boxsizing"></div>
                <el-menu :default-active="$route.name" @select="handleSelect" :router="true"
                    class="el-menu-vertical-demo" background-color="#fff" text-color="#333" active-text-color="#1063f1">
                    <el-submenu index="w">
                        <template slot="title">
                            <i class="el-icon-s-claim"></i>
                            <span>最新消息</span>
                        </template>
                        <el-menu-item index="newmessage">文件消息</el-menu-item>
                        <el-menu-item index="examinenews">审批消息</el-menu-item>
                        <el-menu-item index="setnews">系统消息</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="historynews">
                        <i class="el-icon-s-comment"></i>
                        <span slot="title">历史消息</span>
                    </el-menu-item>
                </el-menu>
            </div>
            <div class="r boxsizing">
                <div style="height:2px;background-color: #F5F6F7;"></div>
                <router-view></router-view>
            </div>
        </div>


    </div>
</template>

<script>
export default {
    components: {
    },
    data() {
        return {
            // newsPath: '',
        }
    },
    created() {
        // // this.newsPath = window.sessionStorage.getItem('newsPath') || 'newmessage'
    },
    methods: {
        handleSelect(index, keyPath) {
            // window.sessionStorage.setItem('newsPath', index)
            // this.newsPath = index
        },
        shutup() {
            // window.sessionStorage.removeItem('newsPath')
            this.$router.push({ name: 'work' },()=>{})
        }
    }

}
</script>

<style lang="scss">
.news {
    .el-submenu .el-menu-item {
        min-width: 0;
    }
}
</style>

<style lang="scss" scoped>
.news {
    background-color: #fff;

    .header {
        background-color: #262729;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        box-sizing: border-box;
        height: 60px;
    }

    .logoimg {
        width: 110px;
        height: 28px;
        margin-top: 5px;
    }

    .shutup {
        background-color: #3b4049;
        padding: 15px 20px;
    }

    .title {
        color: #fff;
        padding: 0 30px;
        border-left: 1px solid #fff;
        font-size: 20px;
    }


    .content {
        width: 100vw;
        height: calc(100vh - 60px);
        margin-top: 60px;
        box-sizing: border-box;

        .l {
            height: 100%;
            min-width: 190px;
            box-sizing: border-box;
            border-right: 1px solid #e4e4e4;

            .nav-title {
                height: 50px;
                border-bottom: 1px solid #e4e4e4;
            }
        }

        .r {
            flex-grow: 1;
            height: 100%;
            box-sizing: border-box;

            display: flex;
            flex-direction: column;
        }
    }


}
</style>